home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2017 October / PCgo 10-2017 CD-ROM Germany.iso / nw.pak / Unnamed File 000108.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  8.8 KB  |  308 lines
  1. /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  2.  * Use of this source code is governed by a BSD-style license that can be
  3.  * found in the LICENSE file. */
  4.  
  5. /* This file defines styles for form controls. The order of rule blocks is
  6.  * important as there are some rules with equal specificity that rely on order
  7.  * as a tiebreaker. These are marked with OVERRIDE. */
  8.  
  9. /* Default state **************************************************************/
  10.  
  11. :-webkit-any(button,
  12.              input[type='button'],
  13.              input[type='submit']):not(.custom-appearance),
  14. select,
  15. input[type='checkbox'],
  16. input[type='radio'] {
  17.   -webkit-appearance: none;
  18.   -webkit-user-select: none;
  19.   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  20.   border: 1px solid rgba(0, 0, 0, 0.25);
  21.   border-radius: 2px;
  22.   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  23.       inset 0 1px 2px rgba(255, 255, 255, 0.75);
  24.   color: #444;
  25.   font: inherit;
  26.   margin: 0 1px 0 0;
  27.   outline: none;
  28.   text-shadow: 0 1px 0 rgb(240, 240, 240);
  29. }
  30.  
  31. :-webkit-any(button,
  32.              input[type='button'],
  33.              input[type='submit']):not(.custom-appearance),
  34. select {
  35.   min-height: 2em;
  36.   min-width: 4em;
  37. /* The following platform-specific rule is necessary to get adjacent
  38.    * buttons, text inputs, and so forth to align on their borders while also
  39.    * aligning on the text's baselines. */
  40.   padding-bottom: 1px;
  41. }
  42.  
  43. :-webkit-any(button,
  44.              input[type='button'],
  45.              input[type='submit']):not(.custom-appearance) {
  46.   -webkit-padding-end: 10px;
  47.   -webkit-padding-start: 10px;
  48. }
  49.  
  50. select {
  51.   -webkit-appearance: none;
  52.   -webkit-padding-end: 20px;
  53.   -webkit-padding-start: 6px;
  54.   /* OVERRIDE */
  55.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  56.       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  57.   background-position: right center;
  58.   background-repeat: no-repeat;
  59. }
  60.  
  61. html[dir='rtl'] select {
  62.   background-position: center left;
  63. }
  64.  
  65. input[type='checkbox'] {
  66.   height: 13px;
  67.   position: relative;
  68.   vertical-align: middle;
  69.   width: 13px;
  70. }
  71.  
  72. input[type='radio'] {
  73.   /* OVERRIDE */
  74.   border-radius: 100%;
  75.   height: 15px;
  76.   position: relative;
  77.   vertical-align: middle;
  78.   width: 15px;
  79. }
  80.  
  81. /* TODO(estade): add more types here? */
  82. input[type='number'],
  83. input[type='password'],
  84. input[type='search'],
  85. input[type='text'],
  86. input[type='url'],
  87. input:not([type]),
  88. textarea {
  89.   border: 1px solid #bfbfbf;
  90.   border-radius: 2px;
  91.   box-sizing: border-box;
  92.   color: #444;
  93.   font: inherit;
  94.   margin: 0;
  95.   /* Use min-height to accommodate addditional padding for touch as needed. */
  96.   min-height: 2em;
  97.   padding: 3px;
  98.   outline: none;
  99. /* For better alignment between adjacent buttons and inputs. */
  100.   padding-bottom: 4px;
  101. }
  102.  
  103. input[type='search'] {
  104.   -webkit-appearance: textfield;
  105.   /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
  106.    * of the default text in relatively spacious languages (i.e. German). */
  107.   min-width: 160px;
  108. }
  109.  
  110. /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
  111.  * TODO(dbeam): are there more types that would benefit from this? */
  112. input[type='search']::-webkit-textfield-decoration-container {
  113.   direction: inherit;
  114. }
  115.  
  116. /* Checked ********************************************************************/
  117.  
  118. input[type='checkbox']:checked::before {
  119.   -webkit-user-select: none;
  120.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAaElEQVR4Xl3PIQoCQQCF4Y8JW42D1bDZ4iVEjDbxFpstYhC7eIVBZHkXFGw734sv/TqDQQ8Xb1udja/I8igeIm7Aygj2IpoKTGZnVRNxAHYi4iPiDlA9xX+aNQDFySziqDN6uSp6y7ofEMwZ05uUZRkAAAAASUVORK5CYII=);
  121.   background-size: 100% 100%;
  122.   content: '';
  123.   display: block;
  124.   height: 100%;
  125.   width: 100%;
  126. }
  127.  
  128. input[type='radio']:checked::before {
  129.   background-color: #666;
  130.   border-radius: 100%;
  131.   bottom: 3px;
  132.   content: '';
  133.   display: block;
  134.   left: 3px;
  135.   position: absolute;
  136.   right: 3px;
  137.   top: 3px;
  138. }
  139.  
  140. /* Hover **********************************************************************/
  141.  
  142. :enabled:hover:-webkit-any(
  143.     select,
  144.     input[type='checkbox'],
  145.     input[type='radio'],
  146.     :-webkit-any(
  147.         button,
  148.         input[type='button'],
  149.         input[type='submit']):not(.custom-appearance)) {
  150.   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  151.   border-color: rgba(0, 0, 0, 0.3);
  152.   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
  153.       inset 0 1px 2px rgba(255, 255, 255, 0.95);
  154.   color: black;
  155. }
  156.  
  157. :enabled:hover:-webkit-any(select) {
  158.   /* OVERRIDE */
  159.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  160.       -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  161. }
  162.  
  163. /* Active *********************************************************************/
  164.  
  165. :enabled:active:-webkit-any(
  166.     select,
  167.     input[type='checkbox'],
  168.     input[type='radio'],
  169.     :-webkit-any(
  170.         button,
  171.         input[type='button'],
  172.         input[type='submit']):not(.custom-appearance)) {
  173.   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  174.   box-shadow: none;
  175.   text-shadow: none;
  176. }
  177.  
  178. :enabled:active:-webkit-any(select) {
  179.   /* OVERRIDE */
  180.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  181.       -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  182. }
  183.  
  184. /* Disabled *******************************************************************/
  185.  
  186. :disabled:-webkit-any(
  187.     button,
  188.     input[type='button'],
  189.     input[type='submit']):not(.custom-appearance),
  190. select:disabled {
  191.   background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  192.   border-color: rgba(80, 80, 80, 0.2);
  193.   box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
  194.       inset 0 1px 2px rgba(255, 255, 255, 0.75);
  195.   color: #aaa;
  196. }
  197.  
  198. select:disabled {
  199.   /* OVERRIDE */
  200.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASklEQVQY02P4z0AMRGZGMaShwCisyhITG/4jw8RErMr+KyxYiFC0YOF/BeyWIikEKWLA4Ta4QogiPMpACt82QRThVQYUYYWz4BAAGr6Ii6kEPacAAAAASUVORK5CYII=),
  201.       -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  202. }
  203.  
  204. input:disabled:-webkit-any([type='checkbox'],
  205.                            [type='radio']) {
  206.   opacity: .75;
  207. }
  208.  
  209. input:disabled:-webkit-any([type='password'],
  210.                            [type='search'],
  211.                            [type='text'],
  212.                            [type='url'],
  213.                            :not([type])) {
  214.   color: #999;
  215. }
  216.  
  217. /* Focus **********************************************************************/
  218.  
  219. :enabled:focus:-webkit-any(
  220.     select,
  221.     input[type='checkbox'],
  222.     input[type='number'],
  223.     input[type='password'],
  224.     input[type='radio'],
  225.     input[type='search'],
  226.     input[type='text'],
  227.     input[type='url'],
  228.     input:not([type]),
  229.     :-webkit-any(
  230.          button,
  231.          input[type='button'],
  232.          input[type='submit']):not(.custom-appearance)) {
  233.   /* OVERRIDE */
  234.   -webkit-transition: border-color 200ms;
  235.   /* We use border color because it follows the border radius (unlike outline).
  236.    * This is particularly noticeable on mac. */
  237.   border-color: rgb(77, 144, 254);
  238.   outline: none;
  239. }
  240.  
  241. /* Action links ***************************************************************/
  242.  
  243. [is='action-link'] {
  244.   cursor: pointer;
  245.   display: inline-block;
  246.   text-decoration: none;
  247. }
  248.  
  249. [is='action-link']:hover {
  250.   text-decoration: underline;
  251. }
  252.  
  253. [is='action-link']:active {
  254.   color: rgb(5, 37, 119);
  255.   text-decoration: underline;
  256. }
  257.  
  258. [is='action-link'][disabled] {
  259.   color: #999;
  260.   cursor: default;
  261.   pointer-events: none;
  262.   text-decoration: none;
  263. }
  264.  
  265. [is='action-link'].no-outline {
  266.   outline: none;
  267. }
  268.  
  269. /* Checkbox/radio helpers ******************************************************
  270.  *
  271.  * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
  272.  * these classes with the markup structure:
  273.  *
  274.  *   <div class="checkbox">
  275.  *     <label>
  276.  *       <input type="checkbox"></input>
  277.  *       <span>
  278.  *     </label>
  279.  *   </div>
  280.  */
  281.  
  282. :-webkit-any(.checkbox, .radio) label {
  283.   /* Don't expand horizontally: <http://crbug.com/112091>. */
  284.   align-items: center;
  285.   display: inline-flex;
  286.   padding-bottom: 7px;
  287.   padding-top: 7px;
  288. }
  289.  
  290. :-webkit-any(.checkbox, .radio) label input {
  291.   flex-shrink: 0;
  292. }
  293.  
  294. :-webkit-any(.checkbox, .radio) label input ~ span {
  295.   -webkit-margin-start: 0.6em;
  296.   -webkit-user-select: none;
  297.   /* Make sure long spans wrap at the same horizontal position they start. */
  298.   display: block;
  299. }
  300.  
  301. :-webkit-any(.checkbox, .radio) label:hover {
  302.   color: black;
  303. }
  304.  
  305. label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
  306.   color: #999;
  307. }
  308.